<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.page-tab{
				padding: 10px;
			}
			.page-tab h3{
				padding: 10px 0;
			}
			.m-tab{
				border: 1px solid #ccc;
			}
			.m-tab-hd{
				position: relative;
				display: flex;
				align-items: center;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #ccc;
				background: #f7f7f7;
			}
			.m-tab-navitem{
				padding: 0 20px;
				height: 40px;
				border-right: 1px solid #ccc;
				cursor: pointer;
			}
			.m-tab-navitem.is-active{
				position: relative;
				z-index: 2;
				top: 1px;
				background: #fff;
				border-bottom:1px solid #fff;
			}
			.m-tab-bd{
				padding: 10px;
			}
			.m-tab-container{
				display: none;
			}
			.m-tab-container.is-active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="page-tab">
			<h3>普通选项卡</h3>
			<div class="m-tab" id="tab1">
				<div class="m-tab-hd">
					<div class="m-tab-navitem is-active">tab01</div>
					<div class="m-tab-navitem">tab02</div>
					<div class="m-tab-navitem">tab03</div>
				</div>
				<div class="m-tab-bd">
					<div class="m-tab-container  is-active">tab container 01</div>
					<div class="m-tab-container">tab container 02</div>
					<div class="m-tab-container">tab container 03</div>
				</div>
			</div>
			<h3>自动轮播</h3>
			<div class="m-tab" id="tab2">
				<div class="m-tab-hd">
					<div class="m-tab-navitem is-active">tab01</div>
					<div class="m-tab-navitem">tab02</div>
					<div class="m-tab-navitem">tab03</div>
				</div>
				<div class="m-tab-bd">
					<div class="m-tab-container  is-active">tab container 01</div>
					<div class="m-tab-container">tab container 02</div>
					<div class="m-tab-container">tab container 03</div>
				</div>
			</div>
			<h3>跳转到下一个上一个</h3>
			<div class="m-tab" id="tab3">
				<div class="m-tab-hd">
					<div class="m-tab-navitem is-active">tab01</div>
					<div class="m-tab-navitem">tab02</div>
					<div class="m-tab-navitem">tab03</div>
				</div>
				<div class="m-tab-bd">
					<div class="m-tab-container  is-active">
						<p>tab container 01</p>
						<button class="nextTabContainer">跳转到下一个</button>
					</div>
					<div class="m-tab-container">
						<p>tab container 02</p>
						<button class="nextTabContainer">跳转到下一个</button>
					</div>
					<div class="m-tab-container">
						<p>tab container 03</p>
						<button class="prevTabContainer">跳转到上一个</button>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function Tab(el,options){
				var opt = options || {}
				this.opt = Object.assign({},{
					trigger:'click',
					autoPlay:false,
					interTime:3000
				},opt)
				
				this.el = document.querySelector(el)
				this.navs = this.el.querySelectorAll('.m-tab-navitem')
				this.containers = this.el.querySelectorAll('.m-tab-container')
				this.num = 0;
				this.maxLength = this.navs.length
				this.timer = null;
				this.psFor()
				if(this.opt.autoPlay){
					this.autoPlay()
				}
				this.clearTimer()
			}
			Tab.prototype.getIndex = function(){
				return this.num
			}
			Tab.prototype.psFor = function(){
				this.navs.forEach((item,index)=>{
					item.addEventListener(this.opt.trigger,(e)=>{
						this.num = index
						this.setStyle()
					})
				})
			}
			Tab.prototype.clearTimer=function(){
				this.el.addEventListener('mouseenter',()=>{
					if(this.timer){
						clearInterval(this.timer)
					}
				})
				this.el.addEventListener('mouseleave',()=>{
					if(this.opt.autoPlay){
						this.autoPlay()
					}
				})
				
			}
			Tab.prototype.setStyle=function(){
				this.navs.forEach((item,index)=>{
					this.navs[index].classList.remove('is-active')
					this.containers[index].classList.remove('is-active')
				})
				this.navs[this.num].classList.add('is-active')
				this.containers[this.num].classList.add('is-active')
			}
			Tab.prototype.next=function(){
				this.num++;
				if(this.num>=this.maxLength){
					this.num=0
				}
				this.setStyle()
			}
			Tab.prototype.prev=function(){
				this.num--;
				if(this.num<=0){
					this.num=this.maxLength-1
				}
				this.setStyle()
			}
			Tab.prototype.autoPlay=function(){
				this.timer = setInterval(()=>{
					this.next()
				},this.opt.interTime)
			}
			var tab1 = new Tab('#tab1')
			var tab2 = new Tab('#tab2',{autoPlay:true,trigger:'mouseover'})
			var tab3 = new Tab('#tab3',{autoPlay:true,interTime:1000})
			document.querySelectorAll('.nextTabContainer').forEach(item=>{
				item.onclick=function(){
					tab3.next()
				}
			})
			document.querySelector('.prevTabContainer').onclick=function(){
				tab3.prev()
			}
			
		</script>
	</body>
</html>
